import {useEffect, useState} from 'react';
// @ts-ignore
import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/legendPlain';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/markLine';
import 'echarts/lib/component/markPoint';
import {queryMonthPaymentPieData} from "@/pages/m/Analyse/service";

export type TypeBarItem = {
  name: string;
  value: number;
}
const MonthPaymentPieChart = (props: {month: string}) => {

  // 图表数据源
  const [data, setData] = useState<TypeBarItem[]>()
  useEffect(() => {
    queryMonthPaymentPieData({month: props.month}).then((res)=>{
      if (res.status === "done"){
        // 获取成功
        setData(res.data)
      }
    })
  }, [props.month]);

  // 图表参数
  const [main, setMain] = useState("")
  const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {},
      // toolbox: {
      //   feature: {
      //     dataView: { show: true, readOnly: false },
      //     // magicType: { show: true, type: ['line', 'bar'] },
      //     // restore: { show: true },
      //     saveAsImage: { show: true }
      //   }
      // },
      // 以下为bar专用
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: data?.map(item => (item.name))
      },
      // 以上为bar专用
      series: [
        {
          // name: props.year,
          // type: 'pie',
          type: 'bar',
          data: data?.map(item=>(item.value)),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          },
          label: {
            show: true,
            position: 'right',
            formatter: function (data: {value: number}) {
              return data.value + "元"
            }
          }
        }
        // 以下为pie专用
        // {
        //   name: '金额',
        //   type: 'pie',
        //   radius: [20, 60],
        //   label: {
        //     alignTo: 'edge',
        //     formatter: '{name|{b}}\n{time|{c} 元}',
        //     minMargin: 5,
        //     edgeDistance: 10,
        //     lineHeight: 15,
        //     rich: {
        //       time: {
        //         fontSize: 10,
        //         color: '#999'
        //       }
        //     }
        //   },
        //   labelLine: {
        //     length: 15,
        //     length2: 0,
        //     maxSurfaceAngle: 80
        //   },
        //   emphasis: {
        //     itemStyle: {
        //       shadowBlur: 10,
        //       shadowOffsetX: 0,
        //       shadowColor: 'rgba(0, 0, 0, 0.5)'
        //     }
        //   },
        //   tooltip: {
        //     valueFormatter: function (value: number) {
        //       return value + ' 元';
        //     }
        //   },
        //   // 饼图数据源引用
        //   data: data
        // }
        // 以下为pie专用
      ]
  }
  useEffect(() => {
    const node = document.getElementById("thisMonth_payPie_chart_1")
    // @ts-ignore
    setMain(node)
  }, [main]);
  if (main !== ""){
    const myChart = echarts.init(main);
    myChart.setOption(option)
  }
  return (
    <div style={{width: `100%`, height: 500}} id={"thisMonth_payPie_chart_1"} />
  )
}
export default MonthPaymentPieChart;
